﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>数据概览</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/data_text.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/li.css">
    <link rel="stylesheet" href="../css/gis.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.30/esri/css/esri.css">
    <style type="text/css">
    	.layui-table tbody tr:hover, .layui-table thead tr{
    		background-color: rgb(123, 230, 224);
    	}
    	.layui-table{
    		background-color: rgba(121, 219, 198, 0.85);
    		color: #d6dbe2;
    	}
    	.layui-table td, .layui-table th{
    		border-color: #72e0bf;
    	}
    	body .layui-layer-title{
    		border-bottom: 1px solid #636a03;
        }
        /*图层管理样式重新定义*/
        /* 选中管理树，背景仍然是白色 */
        .tree-node-selected{background-color:#fff}
        #treeBox .tree-title{ font-size: 14px}
        .tree-node {
            height: 18px;
            white-space: nowrap;
            cursor: pointer;
            margin: 2px;
        }


        .infoTemplatestable table
        {
            border: 1px solid white;
            text-align: center;
            /* background-color:rgba(23,93,154,0.55); */
            font-size:12px;
            font-weight:bold;
            color:crimson;
        }
        .infoTemplatestable tr
        {
            border: 1px solid white;
            text-align: center;
            /* background-color:rgba(23,93,154,0.55); */
            font-size:12px;
            color:crimson;
        }
        .infoTemplatestable th
        {
            border: 1px solid white;
            text-align: center;
            /* background-color:rgba(23,93,154,0.55); */
            font-size:12px;
            
        }
        .infoTemplatestable td
        {
            border: 1px solid white;
            text-align: center;
            /* background-color:rgba(23,93,154,0.55); */
            font-size:12px;
           
        }
        
        .infoTemplatestable table .white
        {
            color:rgb(255, 255, 255);
            
        }
        .infoTemplatestable table .blue
        {
            /* background-color:rgba(48,96,143,0.55); */
        }
        .infoTemplatestable td
        {
            height: 40px;
        }
        .infoTemplatestable table .th-width
        {
            width:198px;

        }
        .infoTemplatestable table .td-width
        {
            width:200px;
            
        }
        
        #sdzp{
        height: 20px;
        color: white;
        background-color: chocolate;
        text-align: center;
        line-height: 20px;
        vertical-align: middle;
        }
        
    </style>
</head>

<body>
    <!-- content开始 -->
    <div class="data_content">
        <div class="data_main">
            <div class="main_center fl">
                <div class="center_text">
                    <div class="main_title" style="padding-left: 25px;">
                    农产品产地空间分布 
                    </div>
                    <div id="mapDiv" style="width:100%;height:100%;">
                        <!-- <iframe style="height:500px;width:500px"src="http://jlu3s.com:7007/SanYa/" frameborder="0"></iframe> -->
                    </div>
                    <div style="position: absolute; right:0; top:5px; z-index: 10;">
                       
                        <div id="navDiv1" style="float: right; overflow: hidden; padding: 0px; border: 0px;">                          
                            <div id="legendTool" class="navItem1" style="background-color:#78c3bf">
                                <img title="图例" onclick="legendBoxManege()"  style="cursor: pointer;transition: all 0.3s;margin: 0 auto;  position: relative;left:5.6px;top:5.6px;width:65%;height:65%;" src="../images/legend.png"/>
                            </div>
                            
                        </div>
                    </div>
                    <div id="layerListBox"  class="layerListBox" style="display: none; background-color: rgba(255, 255, 255,1) ">
                        <div id="layerListBoxDraggable">
                            <ul id="treeBox" class="easyui-tree" ></ul>
                        </div>
                    </div>
                    <div id="legendBox" class="legendBox" style="display: none; background-color: #fff">
                        <div  id="legendDiv">      
                            <div id="legendDiv_重点治理城镇内河湖监测数据" class="esriLegendService" style="display: block;"><table width="95%"><tbody><tr><td align="left"><span class="esriLegendServiceLabel">特色农产品产地</span></td></tr></tbody></table><div id="legendDiv_重点治理城镇内河湖监测数据_0" class="" style="display: block;"><table width="95%" class="esriLegendLayerLabel"><tbody><tr><td align="left"></td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="95%" class="esriLegendLayer"><tbody><tr><td width="35" align="center"><div style="width:30px;height:30px;"><svg overflow="hidden" width="30" height="30" style="touch-action: none;"><defs></defs><circle fill="rgb(0,255, 0)" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1.3333333333333333" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" cx="0" cy="0" r="4.666666666666666" fill-rule="evenodd" stroke-dasharray="none" dojoGfxStrokeStyle="solid" transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000)"></circle></svg></div></td><td><table width="95%"><tbody><tr><td align="left"></td></tr></tbody></table></td></tr></tbody></table></div></div>     
                        </div>
                        <div id="legendDiv_大茅水河道污染源" class="esriLegendService" style="display: block;"><table width="95%">
                            <tbody>
                                <tr>
                                    <td align="left">
                                        <span class="esriLegendServiceLabel">研究区-省</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                        <div id="legendDiv_大茅水河道污染源_0" class="" style="display: block;">
                            <table width="95%" class="esriLegendLayerLabel">
                                <tbody>
                                    <tr>
                                        <td align="left"></td>
                                    </tr>
                                </tbody>
                            </table>
                            <table cellpadding="0" cellspacing="0" width="95%" class="esriLegendLayer">
                                <tbody>
                                    <tr>
                                        <td width="35" align="center">
                                            <div style="width:30px;height:30px;">
                                                <svg overflow="hidden" width="30" height="30" style="touch-action: none;">
                                                    <defs></defs><path fill="rgb(0, 255, 0)" fill-opacity="1" stroke="rgb(0, 255, 0)" stroke-opacity="1" stroke-width="2.6666666666666665" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" path="M -10,-10 L 10,0 L 10,10 L -10,10 L -10,-10 Z" d="M-10-10L 10 0L 10 10L-10 10L-10-10Z" fill-rule="evenodd" stroke-dasharray="none" dojoGfxStrokeStyle="solid" transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000)"></path>
                                                </svg>
                                            </div>
                                        </td>
                                        <td>
                                            <table width="95%">
                                                <tbody>
                                                    <tr>
                                                        <td align="left"></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                   
                        <div id="legendDiv_大茅水河道污染源" class="esriLegendService" style="display: block;">
                            <table width="95%">
                                <tbody
                                ><tr>
                                    <td align="left">
                                        <span class="esriLegendServiceLabel">研究区-市</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div id="legendDiv_大茅水河道污染源_0" class="" style="display: block;">
                            <table width="95%" class="esriLegendLayerLabel">
                                <tbody>
                                    <tr>
                                        <td align="left"></td>
                                    </tr>
                                </tbody>
                            </table>
                            <table cellpadding="0" cellspacing="0" width="95%" class="esriLegendLayer">
                                <tbody>
                                    <tr>
                                        <td width="35" align="center">
                                            <div style="width:30px;height:30px;">
                                                <svg overflow="hidden" width="30" height="30" style="touch-action: none;">
                                                    <defs></defs>
                                                    <path fill="rgb(255, 255, 0)" fill-opacity="1" stroke="rgb(255, 255, 0)" stroke-opacity="1" stroke-width="2.6666666666666665" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" path="M -10,-10 L 10,0 L 10,10 L -10,10 L -10,-10 Z" d="M-10-10L 10 0L 10 10L-10 10L-10-10Z" fill-rule="evenodd" stroke-dasharray="none" dojoGfxStrokeStyle="solid" transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000)"></path>
                                                </svg>
                                            </div>
                                        </td>
                                        <td>
                                            <table width="95%">
                                                <tbody>
                                                    <tr>
                                                        <td align="left"></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                        研究区-县</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
        <div id="legendDiv_大茅水河道污染源_0" class="" style="display: block;">
            <table width="95%" class="esriLegendLayerLabel">
                <tbody>
                    <tr>
                        <td align="left"></td>
                    </tr>
                </tbody>
            </table>
            <table cellpadding="0" cellspacing="0" width="95%" class="esriLegendLayer">
                <tbody>
                    <tr>
                        <td width="35" align="center">
                            <div style="width:30px;height:30px;">
                                <svg overflow="hidden" width="30" height="30" style="touch-action: none;"><defs></defs
                                    ><path fill="#fdbde6" fill-opacity="1" stroke="#fdbde6" stroke-opacity="1" stroke-width="2.6666666666666665" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" path="M -10,-10 L 10,0 L 10,10 L -10,10 L -10,-10 Z" d="M-10-10L 10 0L 10 10L-10 10L-10-10Z" fill-rule="evenodd" stroke-dasharray="none" dojoGfxStrokeStyle="solid" transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000)"></path>
                                </svg>
                            </div>
                        </td>
                        <td>
                            <table width="95%">
                                <tbody><tr><td align="left"></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>   
</div> 
                    
                </div>
            </div>
            <div class="main_right fr">
                <div class="up">
                    <div class="main_title">
                        各类农产品生产总量统计
                    </div>
                    <div id="chart_1" class="echart fl" style="width:100%;height: 100%;"></div>
                </div>
                <div class="up1">
                <div>
                   
                </div>
                    <div class="main_title">
                        <a href="./3D地球.html" style="color: #fff;" target="_blank">3D全局显示</a>
                    </div>
                     <iframe style="height:328px;width:450px"src="./3D地球.html" frameborder="0"></iframe>
                </div>
            </div>
        </div>              
      </div>
  </div>
 </div>
   
    <!--content结束-->

    <script>
       
    </script>
    <script>
       
    </script>
    <script src="js/jquery-2.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/echart.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../layer/layer.js"></script>
    <!-- <script type="text/javascript" src="./js/drag.js"></script>
    <script type="text/javascript" src="js/drag.js"></script> -->
    <script src="https://js.arcgis.com/3.30/init.js"></script>
    <script type="text/javascript">
    var map;
    var layerJson;
    var HeatmapfeatureLayer;
    var sdidx;
    var htmlurl="http://127.0.0.1:1583";//此项目部署的地址http://127.0.0.1:1580     http://202.100.246.234:38081/ChenXiang
    $.cookie("htmlurl",htmlurl); 
    $(document).ready(function(){
        
       
    })
    require(["dojo/dom",
        "dojo/query",
        "dojo/on",
        "esri/map",
        // "measure/MeasureTools",
        "esri/dijit/OverviewMap",
        "esri/toolbars/navigation",
        "esri/layers/FeatureLayer",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/InfoTemplate",
        // "esrichina/TianDiTuLayer",
        "esri/geometry/Extent",
        "esri/renderers/HeatmapRenderer",
        "esri/geometry/Point",
        "esri/dijit/Legend",
        "esri/tasks/IdentifyTask",
        "esri/tasks/IdentifyParameters",
        "esri/layers/layer",
        "dojo/dnd/Moveable",
        "dojo/domReady!"
    ], function(
        dom,
        query,
        on,
        Map,
        //MeasureTools,
        OverviewMap,
        Navigation,
        FeatureLayer,
        ArcGISDynamicMapServiceLayer,
        ArcGISTiledMapServiceLayer,
        InfoTemplate,
        //TianDiTuLayer,
        Extent,
        HeatmapRenderer,
        Point,
        Legend,
        IdentifyTask,
        IdentifyParameters,
        Moveable) {
        map = new Map("mapDiv",
        {
            //extent:new Extent({"xmin":108.941,"ymin":18.15,"xmax":109.805,"ymax":18.62,"spatialReference":{"wkid":4326}}),
            maxZoom:17,
            logo:false,
    
        });

      

        var layer_RK_HB=new ArcGISDynamicMapServiceLayer("http://www.jlu3s.com:7006/arcgis/rest/services/NCP/CPD/MapServer",{id:"RK_HB"});
        map.addLayer(layer_RK_HB);


        function loadlayer(){     
            for(var i=0;i<layerJson.length;i++)
            {
                if(layerJson[i].children!=undefined&&layerJson[i].children.length>0)//如果图层管理树有子节点，则遍历加载图层
                {
                    for(var j=i;j<(i+layerJson[i].children.length);j++)
                    {
                        var layer_info=layerJson[i].children[j-i];
                          
                        var layer_temp;
                        if(layer_info.mapServiceStyle=="遥感影像"){
                            layer_temp=new ArcGISTiledMapServiceLayer(layer_info.url,{id:layer_info.layerId});
                            layer_temp.setVisibility(layer_info.checked);
                            map.addLayer(layer_temp);
                            
                        }
                        else if(layer_info.mapServiceStyle=="ArcGISDynamicMapServiceLayer"){
                            layer_temp=new ArcGISDynamicMapServiceLayer(layer_info.url,{id:layer_info.layerId});
                            layer_temp.setVisibility(layer_info.checked);
                            map.addLayer(layer_temp);
                        }
                        else if(layer_info.mapServiceStyle=='HeatmapLayer')////热力图图层
                        {
                            addHeatmapLayerFun();
                        }
                        
                        else if(layer_info.mapServiceStyle=='FeatureLayer'){
                            layer_temp = new FeatureLayer(
                                layer_info.url,{
                                    id:layer_info.layerId,
                                    outFields: ["*"],
                                    infoTemplate:layer_info.infoTemplates
                                });
                                layer_temp.setVisibility(layer_info.checked);
                            map.addLayer(layer_temp);
                        }
                        else{
                           
                            
                        }
                        
                    }
                }
                else//没有子节点，遍历
                {
                    var layer_info=layerJson[i];
                    var layer_temp;
                    if(layer_info.mapServiceStyle=="遥感影像"){
                        layer_temp=new ArcGISTiledMapServiceLayer(layer_info.url,{id:layer_info.layerId});
                        layer_temp.setVisibility(layer_info.checked);
                        map.addLayer(layer_temp);
                    }
                    else if(layer_info.mapServiceStyle=="ArcGISDynamicMapServiceLayer"){
                        layer_temp=new ArcGISDynamicMapServiceLayer(layer_info.url,{id:layer_info.layerId});
                        layer_temp.setVisibility(layer_info.checked);
                        map.addLayer(layer_temp);
                    }
                    else if(layer_info.mapServiceStyle=='HeatmapLayer')//热力图图层
                    {
                        addHeatmapLayerFun();
                    }
                    else if(layer_info.mapServiceStyle=='FeatureLayer'){
                        layer_temp = new FeatureLayer(
                            layer_info.url,{
                                id:layer_info.layerId,
                                outFields: ["*"],
                                infoTemplate:layer_info.infoTemplates
                            });
                        layer_temp.setVisibility(layer_info.checked);
                        map.addLayer(layer_temp);
                    }
                           
                    else{
                        
                        
                    }
                    
                   
                } 
            }
            // addHeatmapLayerFun();
            addLegend();
            popup();//更改属性弹窗的样式
        }
        
        function addHeatmapLayerFun(){
            //添加热力图渲染图层
            var layerDefinition = {
                "geometryType": "esriGeometryPoint",
                "fields": [{
                    "name": "num",
                    "type": "esriFieldTypeInteger",
                    "alias": "num"
                }]
            }
            var featureCollection = {
            layerDefinition: layerDefinition,
            featureSet: null
            };
            //创建FeatureLayer图层
            HeatmapfeatureLayer = new esri.layers.FeatureLayer(featureCollection, {
                mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
                outFields: ["*"],
                opacity: 1,
                visible:true
            });
            var heatmapRenderer = new HeatmapRenderer({
                blurRadius: 2,
                colorStops: [
                    { ratio: 0, color: "rgba(39,195,66, 0)" },
                    { ratio: 0.25, color: "rgb(39,195,66,0.85)" },
                    { ratio: 0.5, color: "rgb(176,196,11,0.85)"},
                    { ratio: 0.75, color: "rgb(255,255,0,0.85)"},
                    { ratio: 0.95, color: "rgb(196,83,11,0.85)"}
                ],
                field:'area',
                maxPixelIntensity: 20000,
                minPixelIntensity: 800
            });
            HeatmapfeatureLayer.setRenderer(heatmapRenderer);//heatmapRendererhtml中创建的渲染器
            map.addLayer(HeatmapfeatureLayer);
            var heatDataUrl = "../养殖塘点信息.json";//热力图渲染的源数据点
            $.getJSON(heatDataUrl,{},function(data,textStatus,jqXHR){
            for (var i = 0; i < data.data.length; i++) {
                var x = data.data[i].x;
                var y = data.data[i].y;
                var point = new esri.geometry.Point(x, y, new esri.SpatialReference({wkid: 4326}));//初始化起点
                var graphic =new esri.Graphic(point);
                graphic.setAttributes( {"area":Number(data.data[i].area)});
                HeatmapfeatureLayer.add(graphic);
            }
            });
        }
        
        function navEvent(id) {
                map.graphics.clear();
                switch (id) {
                    case 'pan':
                        map.enablePan();
                        navToolbar.activate(Navigation.PAN);
                        navOption = id;
                        break;
                    case 'zoomprev':
                        navToolbar.zoomToPrevExtent();
                        break;
                    case 'zoomnext':
                        navToolbar.zoomToNextExtent();
                        break;
                    case 'extent':
                        navToolbar.zoomToFullExtent();
                        break;
                    case 'zoomin':
                        navToolbar.activate(Navigation.ZOOM_IN);
                        navOption = id;
                        break;
                    case 'zoomout':
                        navToolbar.activate(Navigation.ZOOM_OUT);
                        navOption = id;
                        break;
                    case 'deactivate':
                        navToolbar.deactivate();
                        navOption = id;
                        break;
                    case 'layerListTool':
                       
                        break;
                    case 'legendTool':
                       
                        break;
                }
            }
    
        //更改属性弹窗的样式
        function popup()
        {
            //标题背景
            $(".esriPopup .titlePane").css({
                // 'background-color':'rgba(65,106,135,0.8)'
                
                'background': 'rgba(0,0,0,0.3)',
                'color': 'rgba(255,255,255,0.90)'
               
            })
            //内容背景
            $(".esriPopup .contentPane").css({
                // 'background-color':'rgba(48,96,143,0.4)',
                'background-color':'rgba(0,0,0,0.3)',
                'color':'#FFFFFF',
                'padding':'0px',
                'font-size':'14px',
                'font-weight':'bold',
                'color': 'rgba(255,255,255,0.90)',
                'max-height': '800px'
                
            })
            $(".esriPopup .actionsPane").css({
                // 'background-color':'rgba(65,106,135,0.5)'
                'background-color':'rgba(0,0,0,0.3)',
                'color': 'rgba(255,255,255,0.90)'
            })
            //去掉最大化的按钮
            $(".esriPopup .titleButton.maximize").css({
                'display':'none'
            })
            //去掉缩放至的按钮
            $(".actionList").css({
                'display':'none'
            })
    
            $(".esriPopup .sizer").css({
                'position': 'relative',
                'width': '400px',
                'z-index': '1'
            }) 
            
            // makePopupDraggable();
            
        }
        //加载图例函数
        function addLegend(){
                // 用arcgis api 中的Legend显示图例
                var layerInfos=new Array();
                if(map.graphicsLayerIds.length>0)
                {
                    for(var i=0;i<map.graphicsLayerIds.length;i++)
                    {
                        var layer_temp={layer:map.getLayer(map.graphicsLayerIds[i]),title:map.getLayer(map.graphicsLayerIds[i]).id}
                        layerInfos.push(layer_temp)
                    }
                }
                if (layerInfos.length > 0) {
                    var legendDijit = new Legend({
                        map: map,
                        layerInfos: layerInfos,
                    }, "legendDiv");
                    legendDijit.startup(); 
                }
            }
        function makePopupDraggable(){  
            var popupDiv = document.querySelector(".esriPopup");  
            var dnd;  
            if (popupDiv) {  
                dnd = new Moveable(popupDiv);  
            }  
            // TODO: Figure out how to make the little arrow point the right way after dragging.  
            return dnd;  
        }  
    });
    function layerListBoxManege(){
        if($('#layerListBox').css('display')=='none')
        {
            $('#layerListBox').css('display','block');
        }
        else
        {
            $('#layerListBox').css('display','none');
        }
    }
    function legendBoxManege(){
            if($('#legendBox').css('display')=='none')
            {
                $('#legendBox').css('display','block');
                $('#legendBox').draggable();//实现窗口可拖拽
            }
            else
            {
                $('#legendBox').css('display','none');
            }    
        }
    </script>
</body>
</html>